import React from 'react';
import { Link} from 'react-router-dom';

import MUtil from 'util/mm.js';
import User from 'servers/user-server.js';

const _user = new User();
const _mm = new MUtil();

class TopNav extends React.Component{
    constructor(props){
        super(props);
        this.state={
            username: _mm.getStorage('userInfo').username || ''
        }
    }
    //  退出登录
    onLogout(){
        _user.logout().then(res=>{
            _mm.removeStorage('userInfo');
            // 因为topNav 这个组件 没有history对象 没有 跳转链接
            // so 直接用window.location.href 来跳转

            // this.props.history.push('/login');
           window.location.href='/login';
        }, errMsg =>{
            _mm.errorTips(errMsg);
        });
    }
    render(){
        return(
                <div className="navbar navbar-default top-navbar" role="navigation">
                    <div className="navbar-header">
                        <Link className="navbar-brand" to="/">
                        <b>HAPPY</b>MMALL</Link>
                            <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                                <span className="sr-only">Toggle navigation</span>
                                <span className="icon-bar"></span>
                                <span className="icon-bar"></span>
                                <span className="icon-bar"></span>
                            </button>
                    </div>

                    <ul className="nav navbar-top-links navbar-right">
                        <li className="dropdown">
                            <a className="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                                <i className="fa fa-envelope fa-fw"></i>
                                <i className="fa fa-caret-down"></i>
                            </a>
                            <ul className="dropdown-menu dropdown-messages">
                                <li>
                                    <a href="#">
                                        <div>
                                            <strong>John Doe</strong>
                                            <span className="pull-right text-muted">
                                                <em>Today</em>
                                            </span>
                                        </div>
                                        <div>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</div>
                                    </a>
                                </li>
                                <li className="divider"></li>
                                <li>
                                    <a href="#">
                                        <div>
                                            <strong>John Smith</strong>
                                            <span className="pull-right text-muted">
                                                <em>Yesterday</em>
                                            </span>
                                        </div>
                                        <div>Lorem Ipsum has been the industry's standard dummy text ever since an kwilnw...</div>
                                    </a>
                                </li>
                                <li className="divider"></li>
                                <li>
                                    <a href="#">
                                        <div>
                                            <strong>John Smith</strong>
                                            <span className="pull-right text-muted">
                                                <em>Yesterday</em>
                                            </span>
                                        </div>
                                        <div>Lorem Ipsum has been the industry's standard dummy text ever since the...</div>
                                    </a>
                                </li>
                                <li className="divider"></li>
                                <li>
                                    <a className="text-center" href="#">
                                        <strong>Read All Messages</strong>
                                        <i className="fa fa-angle-right"></i>
                                    </a>
                                </li>
                            </ul>
                    
                        </li>

                        <li className="dropdown">
                            <a className="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                                <i className="fa fa-tasks fa-fw"></i>
                                <i className="fa fa-caret-down"></i>
                            </a>
                            <ul className="dropdown-menu dropdown-tasks">
                                <li>
                                    <a href="#">
                                        <div>
                                            <p>
                                                <strong>Task 1</strong>
                                                <span className="pull-right text-muted">60% Complete</span>
                                            </p>
                                            <div className="progress progress-striped active">
                                                <div className="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                >
                                                    <span className="sr-only">60% Complete (success)</span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li className="divider"></li>
                                <li>
                                    <a href="#">
                                        <div>
                                            <p>
                                                <strong>Task 2</strong>
                                                <span className="pull-right text-muted">28% Complete</span>
                                            </p>
                                            <div className="progress progress-striped active">
                                                <div className="progress-bar progress-bar-info" role="progressbar" aria-valuenow="28" aria-valuemin="0" aria-valuemax="100" >
                                                    <span className="sr-only">28% Complete</span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li className="divider"></li>
                                <li>
                                    <a href="#">
                                        <div>
                                            <p>
                                                <strong>Task 3</strong>
                                                <span className="pull-right text-muted">60% Complete</span>
                                            </p>
                                            <div className="progress progress-striped active">
                                                <div className="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                                                >
                                                    <span className="sr-only">60% Complete (warning)</span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li className="divider"></li>
                                <li>
                                    <a href="#">
                                        <div>
                                            <p>
                                                <strong>Task 4</strong>
                                                <span className="pull-right text-muted">85% Complete</span>
                                            </p>
                                            <div className="progress progress-striped active">
                                                <div className="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"
                                                    >
                                                    <span className="sr-only">85% Complete (danger)</span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </li>
                                <li className="divider"></li>
                                <li>
                                    <a className="text-center" href="#">
                                        <strong>See All Tasks</strong>
                                        <i className="fa fa-angle-right"></i>
                                    </a>
                                </li>
                            </ul>
                
                        </li>

                        <li className="dropdown">
                            <a className="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
                                <i className="fa fa-bell fa-fw"></i>
                                <i className="fa fa-caret-down"></i>
                            </a>
                            <ul className="dropdown-menu dropdown-alerts">
                                <li>
                                    <a href="#">
                                        <div>
                                            <i className="fa fa-comment fa-fw"></i> New Comment
                                            <span className="pull-right text-muted small">4 min</span>
                                        </div>
                                    </a>
                                </li>
                                <li className="divider"></li>
                                <li>
                                    <a href="#">
                                        <div>
                                            <i className="fa fa-twitter fa-fw"></i> 3 New Followers
                                            <span className="pull-right text-muted small">12 min</span>
                                        </div>
                                    </a>
                                </li>
                                <li className="divider"></li>
                                <li>
                                    <a href="#">
                                        <div>
                                            <i className="fa fa-envelope fa-fw"></i> Message Sent
                                            <span className="pull-right text-muted small">4 min</span>
                                        </div>
                                    </a>
                                </li>
                                <li className="divider"></li>
                                <li>
                                    <a href="#">
                                        <div>
                                            <i className="fa fa-tasks fa-fw"></i> New Task
                                            <span className="pull-right text-muted small">4 min</span>
                                        </div>
                                    </a>
                                </li>
                                <li className="divider"></li>
                                <li>
                                    <a href="#">
                                        <div>
                                            <i className="fa fa-upload fa-fw"></i> Server Rebooted
                                            <span className="pull-right text-muted small">4 min</span>
                                        </div>
                                    </a>
                                </li>
                                <li className="divider"></li>
                                <li>
                                    <a className="text-center" href="#">
                                        <strong>See All Alerts</strong>
                                        <i className="fa fa-angle-right"></i>
                                    </a>
                                </li>
                            </ul>
                
                        </li>

                        <li className="dropdown">
                        <a className="dropdown-toggle" href="javascript:;" aria-expanded="false">
                            <i className=" fa fa-user fa-fw"></i>
                            {
                                this.state.username
                                ? <span> 欢迎 {this.state.username}</span>
                                : <span> 欢迎 您·</span>
                            }
                           
                        </a>

                            <ul className="dropdown-menu dropdown-user">
                                
                                <li>
                                    <a onClick={()=>{this.onLogout()}}>
                                        <i className="fa fa-sign-out fa-fw"></i><span>退出登录</span> 
                                    </a>
                                </li>
                            </ul>
                    
                        </li>
                
                    </ul>
                </div>
        )
    }
}

export default TopNav; 